<template>
  <div>
    <el-row :gutter="20" style="width: 90%; margin: 0 auto" v-if="code == 200">
      <el-col :span="12" :offset="12" style="margin-top: 25px">
        <el-button
          type="primary"
          @click="orderPassword(2)"
          v-hasPermi="['service:orderMessage:edit']"
          >取票密码</el-button
        >
        <el-button
          type="primary"
          @click="orderPassword(3)"
          v-hasPermi="['service:orderMessage:edit']"
          >清除购票记录
        </el-button>
        <el-button
          v-hasPermi="['service:orderMessage:edit']"
          v-if="!message.refundInfo.isApply"
          type="primary"
          @click="orderPassword(4)"
          >退款</el-button
        >
        <el-button
          type="primary"
          v-hasPermi="['service:orderMessage:edit']"
          v-if="message.refundInfo.totalFefund < message.payInfo.totalPay"
          @click="orderPassword(5)"
          >退手续费</el-button
        >
        <el-button
          v-hasPermi="['service:orderMessage:edit']"
          v-if="message.refundInfo.status == '处理中'"
          type="primary"
          @click="orderPassword(6)"
          >修改申请</el-button
        >
        <el-button
          v-hasPermi="['service:orderMessage:edit']"
          v-if="message.refundInfo.status == '处理中'"
          type="primary"
          @click="orderPassword(7)"
          >取消申请</el-button
        >
      </el-col>
      <!-- 申请退款模态框 -->
      <el-dialog
        title="申请退款"
        :visible.sync="dialogFormVisible"
        width="550px"
      >
        <order-ref v-on:success="success" :parentRefData="message"></order-ref>
      </el-dialog>
      <!-- 退手续费/服务费模态框 -->
      <el-dialog
        title="申请退手续费"
        :visible.sync="RefDialogFormVisible"
        width="550px"
      >
        <order-fee
          v-on:success="feeSuccess"
          :parentRefData="message"
        ></order-fee>
      </el-dialog>
      <!-- 取消退款 -->
      <el-dialog
        title="取消退款原因"
        :visible.sync="dialogVisibleMsgModel"
        width="30%"
      >
        <span>退款原因：</span>
        <el-input
          style="margin-top: 10px"
          type="textarea"
          :rows="2"
          v-model="refModel.cancleReason"
          placeholder="请输入取消退款原因"
        />

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleMsgModel = false">取 消</el-button>
          <el-button type="primary" @click="refMessageFun">确 定</el-button>
        </span>
      </el-dialog>
      <el-col :span="24" :offset="0">
        <h4>订单信息</h4>
      </el-col>
      <div class="msgBody">
        <el-col class="msgItem" :span="8" :offset="0">
          订单编号: {{ message.orderInfo.orderCode }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          分销商: {{ message.orderInfo.traderAccount }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          订单状态: {{ message.orderInfo.orderStatusStr }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          预定时间: {{ newDate(message.orderInfo.preTime) }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          是否打印: {{ message.orderInfo.isPrint }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          打印时间:
          {{
            message.orderInfo.printTime > 0
              ? newDate(message.orderInfo.printTime)
              : "-"
          }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          发车时间: {{ newDate(message.orderInfo.startDateTime) }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          出发地: {{ message.orderInfo.stationName }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          目的地: {{ message.orderInfo.targetName }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          班次: {{ message.orderInfo.busNum }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          在线退票:
          {{ message.orderInfo.isCanRefundOnline ? "支持" : "不支持" }}</el-col
        >
      </div>

      <el-col :span="24" :offset="0">
        <h4>用户信息</h4>
      </el-col>
      <div class="msgBody">
        <el-col class="msgItem" :span="8" :offset="0">
          用户名:
          {{
            message.userInfo.userName ? message.userInfo.userName : "无"
          }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          姓名:
          {{ message.userInfo.name ? message.userInfo.name : "无" }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          手机号:
          {{
            message.userInfo.phone && message.userInfo.phone != "0"
              ? message.userInfo.phone
              : "无"
          }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          最后登陆时间: {{ newDate(message.userInfo.lastLoginTime) }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          用户类型: {{ message.userInfo.userType }}</el-col
        >
      </div>

      <el-col :span="24" :offset="0">
        <h4>乘车人信息</h4>
      </el-col>
      <div
        class="msgBody"
        v-for="(item, index) in message.passengerInfos"
        :key="index + 3.3"
      >
        <div>
          <el-col class="msgItem" :span="8" :offset="0">
            乘车人{{ index + 1 }}: {{ item.name }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            电话号码: {{ item.phone ? item.phone : "无" }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            证件类型: {{ cardType(item.certType) }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            证件号码: {{ item.certNo }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            票号: {{ item.ticketNo }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            订单状态: {{ item.status }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            打印时间:
            {{ item.printTime ? newDate(item.printTime) : "-" }}</el-col
          >
        </div>
      </div>

      <el-col :span="24" :offset="0">
        <h4>保险信息</h4>
      </el-col>
      <div class="msgBody">
        <el-col class="msgItem" :span="8" :offset="0">
          保险:
          {{
            message.insureInfos.length > 0 ? message.insureInfos : "无"
          }}</el-col
        >
      </div>

      <el-col :span="24" :offset="0">
        <h4>支付信息</h4>
      </el-col>
      <div class="msgBody">
        <el-col class="msgItem" :span="8" :offset="0">
          票价: ￥{{ message.payInfo.ticketPrice }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          服务费: ￥{{ message.payInfo.serviceFee }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          保险费: ￥{{ message.payInfo.insureFee }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          数量: {{ message.payInfo.totalAmount }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          红包: ￥{{ message.payInfo.redPackage }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0" style="color: #ff7b48">
          实付: ￥{{ message.payInfo.totalPay }}</el-col
        >
      </div>

      <div v-if="message.refundInfo.isApply">
        <el-col :span="24" :offset="0">
          <h4>退款信息</h4>
        </el-col>
        <div class="msgBody">
          <el-col class="msgItem" :span="8" :offset="0">
            收取手续费: ￥{{ message.refundInfo.refundFee }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0">
            退还服务费: ￥{{ message.refundInfo.serviceFee }}</el-col
          >
          <el-col class="msgItem" :span="8" :offset="0" style="color: #ff7b48">
            实际退款: ￥{{ message.refundInfo.totalFefund }}</el-col
          >
        </div>
      </div>

      <el-col :span="24" :offset="0">
        <h4>操作日志</h4>
      </el-col>
      <div
        class="msgBody"
        v-for="(item, index) in message.operateInfos"
        :key="index + 1"
      >
        <el-col class="msgItem" :span="24" :offset="0">
          {{ newDate(item.operateTime)
          }}<span style="margin-left: 40px">{{
            item.operateItem
          }}</span></el-col
        >
      </div>
    </el-row>
  </div>
</template>

<script>
import {
  queryorderpwd,
  cleanprehistory,
  queryorderdetail,
  applyrefund,
  applyrefundfee,
} from "@/api/service/orderList";
import { cancleapplyrefund, changerefund } from "@/api/service/refOrderList";
import utils from "../../js/index";
import orderRef from "../module/orderListRef";
import orderFee from "../module/orderRefFee";
export default {
  components: {
    orderRef,
    orderFee,
  },
  data() {
    return {
      message: {},
      code: 0,
      dialogFormVisible: false,
      RefDialogFormVisible: false,
      dialogVisibleMsgModel: false,
      refModel: {},
    };
  },
  created() {
    this.orderMessage(this.$route.query.orderCode);
  },
  mounted() {
    // this.orderMessage();
  },
  methods: {
    cardType(id) {
      switch (id) {
        case "1":
          return "身份证";
          break;
        case "2":
          return "回乡证";
          break;
        case "3":
          return "护照";
          break;
        case "4":
          return "台胞证";
          break;
        default:
          break;
      }
    },
    orderPassword(data) {
      switch (data) {
        case 2:
          // 获取取票密码
          queryorderpwd({ orderCode: this.$route.query.orderCode }).then(
            (res) => {
              if (res.code == 200) {
                this.$alert(
                  `<div><p style="width:40%;display: inline-block;">座位号: ${res.data.seatNums}</p><p style="width:40%;display: inline-block;">张数: ${res.data.ticketAmount}</p><p>取票密码: ${res.data.pwd}</p></div>`,
                  "取票密码",
                  {
                    dangerouslyUseHTMLString: true,
                  }
                );
              } else {
                this.$message.error(res.msg);
              }
            }
          );
          break;
        case 3:
          // 清除购票记录
          this.$confirm("点击确定清除购票记录", "清除购票记录", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            cleanprehistory({ orderCode: this.$route.query.orderCode }).then(
              (res) => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                } else {
                  this.$message.error(res.msg);
                }
              }
            );
          });
          break;
        case 4:
          // 退款
          this.dialogFormVisible = true;
          break;
        case 5:
          // 退手续费
          this.RefDialogFormVisible = true;
          break;
        case 6:
          /** 修改按钮操作 */
          this.dialogFormVisible = true;
        case 7:
          /** 取消退款申请 */
          this.dialogVisibleMsgModel = true;
          this.refModel.orderCode = this.$route.query.orderCode;
        default:
          break;
      }
    },
    cancleRef(code) {},
    refMessageFun() {
      if (!this.refModel.cancleReason) {
        this.$message.error("请输入取消退款原因");
        return;
      }
      cancleapplyrefund(this.refModel).then((res) => {
        if (res.code == 200) {
          this.dialogVisibleMsgModel = false;
          this.refModel = {};
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 退手续费模态框
    feeSuccess(type, viewData) {
      console.log(type);
      if (type == 1) {
        this.RefDialogFormVisible = false;
      } else {
        applyrefundfee(viewData)
          .then((res) => {
            if (res.code == 200) {
              this.orderMessage(this.$route.query.orderCode);
              this.RefDialogFormVisible = false;
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {});
      }
    },
    // 退款子组件模态框
    success(type, viewData) {
      if (type == 1) {
        this.dialogFormVisible = false;
      } else {
        // 根据订单状态判断修改退款
        if (this.message.refundInfo.status == "处理中") {
          changerefund(viewData)
            .then((res) => {
              if (res.code == 200) {
                this.orderMessage(this.$route.query.orderCode);
                this.RefDialogFormVisible = false;
                this.dialogFormVisible = false;
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {});
          return;
        } else if (this.message.refundInfo.status == "未申请退款") {
          // 申请退款
          applyrefund(viewData)
            .then((res) => {
              if (res.code == 200) {
                this.dialogFormVisible = false;
                this.RefDialogFormVisible = false;
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {});
        } else {
          this.$message.success("该订单状态不支持此操作");
        }
      }
    },

    orderMessage(code) {
      queryorderdetail({ orderCode: this.$route.query.orderCode })
        .then((res) => {
          if (res.code == 200) {
            this.code = res.code;
            this.message = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    newDate(date) {
      return utils.utils.NewDate(date);
    },
  },
};
</script>
<style scoped>
.msgItem {
  line-height: 33px;
}
.msgBody {
  margin-left: 40px;
}
</style>